<template>
  <div class="personal-center">
    <h1>个人中心</h1>
    <el-row>
      <el-col :span="8">
        <el-avatar :src="avatarUrl" :size="120" fit="cover">
        </el-avatar>

      </el-col>
      <el-col :span="16">
        <el-form :model="admin" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="admin.adminName" disabled clearable></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="admin.adminPhone" disabled clearable></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-input v-model="admin.adminRoleName" disabled clearable></el-input>
          </el-form-item>
        </el-form>

      </el-col>
      <el-button type="primary" @click="showUpdateAdminPassWindow(admin)">修改密码</el-button>
      <el-button type="primary" @click="showUpdateAdminWindow(admin)">修改姓名</el-button>
      <el-button type="primary" @click="showUpdatePhoneWindow(admin)">换绑手机</el-button>
    </el-row>
    <!--换绑电话窗口-->
    <el-dialog title="换绑电话" :visible.sync="updatePhoneWindow">
      <el-form :model="updatePhone" label-width="120px">
        <el-row :gutter="20" type="flex">
          <el-col :span="12">
            <el-form-item label="当前手机号码:">
              <el-input type="text" v-model="updatePhone.adminPhone" placeholder="当前手机号码" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新手机号码:">
              <el-input type="text" v-model="updatePhone.newPhone" placeholder="新手机号码" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="验证码">
              <el-input type="text" v-model="updatePhone.code" placeholder="验证码" autocomplete="off"
                style="width: 50%;"></el-input>
              <el-button type="primary" style="width: 40%; float: right;" @click="sendLoginMessage()">发送验证码</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatePhoneWindow = false">取 消</el-button>
        <el-button @click="OKUpdatePhone">确 定</el-button>
      </div>
    </el-dialog>

    <!--修改信息窗口-->
    <el-dialog title="修改姓名" :visible.sync="updateAdminWindow">
      <el-form label-width="120px">
        <el-row :gutter="20" type="flex">
          <el-col :span="12">
            <el-form-item label="当前姓名:">
              <el-input type="text" v-model="admin.adminName" placeholder="当前姓名 " autocomplete="off"
                disabled></el-input>
            </el-form-item>
            <el-form-item label="新姓名:">
              <el-input type="text" v-model="adminName" placeholder="新姓名" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateAdminWindow = false">取 消</el-button>
        <el-button @click="OKUpdateAdminName">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改密码窗口-->
    <el-dialog title="修改密码" :visible.sync="updateAdminPassWindow">
      <el-form :model="updateAdminPass" label-width="160px">
        <el-row :gutter="20" type="flex">
          <el-col :span="12">
            <el-form-item label="请输入旧密码:">
              <el-input type="password" v-model="updateAdminPass.oldPass" placeholder="旧密码 " autocomplete="off"
                show-password></el-input>
            </el-form-item>
            <el-form-item label="请再次输入旧密码:">
              <el-input type="password" v-model="updateAdminPass.oldPassAgain" placeholder="旧密码 " autocomplete="off"
                show-password></el-input>
            </el-form-item>
            <el-form-item label="请输入新密码:">
              <el-input type="password" v-model="updateAdminPass.newPass" placeholder="新密码" autocomplete="off"
                show-password></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateAdminPassWindow = false">取 消</el-button>
        <el-button @click="OKUpdateAdminPass">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>




<script>
  export default {
    name: "AdminInfo",
    data() {
      return {
        avatarUrl: 'https://class108.oss-cn-chengdu.aliyuncs.com/01.png',
        headers: {},
        admin: { //管理员信息
          adminRoleName: '', //角色名
          adminName: '', //真名
          adminPhone: '', //电话
          adminPass: '', //密码
        },
        updatePhone: { //修改管理员电话参数
          adminPhone: "", //电话
          newPhone: "", //新号码
          code: "" //验证码
        },
        updateAdminPass: { //修改密码参数
          oldPass: "", //旧密码
          oldPassAgain: "", //二次输入旧密码
          newPass: "", //新密码
        },
        adminName: '', //管理员名字
        oldPhone: "", //旧电话
        updatePhoneWindow: false, //修改电话窗口
        updateAdminWindow: false, //修改管理员信息窗口
        updateAdminPassWindow: false, //修改密码窗口
      };
    },
    methods: {
      //展开修改密码窗口
      showUpdateAdminPassWindow(admin) {
        this.updateAdminPassWindow = true
      },
      //确认修改密码
      OKUpdateAdminPass() {
        this.$http.post("/person/adminInfo/changeAdminPass.api", this.updateAdminPass).then(resp => {
          if (resp.data.code == 200) {
            this.SuccessTip(resp.data);
            this.loadAdmin();
            this.updateAdminPassWindow = false
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //展开修改管理员信息窗口
      showUpdateAdminWindow(admin) {
        this.updateAdmin = admin;
        this.updateAdminWindow = true
      },
      //确认修改管理员信息
      OKUpdateAdminName() {
        this.$http.get("/person/adminInfo/changeMyAdminInfo.api", {
          params: {
            adminName: this.adminName
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.SuccessTip(resp.data);
            this.loadAdmin();
            this.updateAdminWindow = false
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //展开修改手机号窗口
      showUpdatePhoneWindow(admin) {
        this.updatePhone.adminPhone = admin.adminPhone;
        this.updatePhoneWindow = true
      },
      //确认修改手机
      OKUpdatePhone() {
        this.$http.post("/person/adminInfo/changeAdminPhone.api", this.updatePhone).then(resp => {
          if (resp.data.code == 200) {
            this.loadAdmin();
            this.updatePhoneWindow = false
            this.SuccessTip(resp.data)
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //发送验证码
      sendLoginMessage() {
        if (this.updatePhone.adminPhone == "") {
          this.$message.error("请先输入手机号码");
        } else if (this.updatePhone.adminPhone.length != 11) {
          this.$message.error("手机号码长度有误");
        } else {
          this.$http.get("/person/adminInfo/sendCheckMessage", {
            params: {
              phone: this.updatePhone.adminPhone
            }
          }).then(resp => {
            if (resp.data.code == 200) {
              this.SuccessTip(resp.data);
              this.loading = !this.loading;
              setTimeout(() => {
                this.loading = !this.loading;
              }, 1000 * 60); // 60秒后再次改变loading状态
            } else {
              this.ErrorTip(resp.data)
            }
          })
        }
      },
      //查个人信息
      loadAdmin() {
        this.$http.get("/person/adminInfo/myAdminInfo.api").then(resp => {
          if (resp.data.code == 200) {
            this.admin = resp.data.data
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      SuccessTip(data) { //成功
        if (data.code === 200) {
          // 如果code为200，则弹出绿色的提示框
          this.$message({
            message: data.msg,
            type: 'success'
          });
        }
      },
      ErrorTip(data) { //失败
        if (data.code !== 200) {
          // 如果code为200，则弹出绿色的提示框
          this.$message({
            message: data.msg,
            type: 'error'
          });
        }
      },
    },
    created() {
      this.loadAdmin();
      this.headers["token"] = localStorage.getItem("token");
    }
  };
</script>

<style scoped>
  .personal-center {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .el-avatar__inner img {
    border-radius: 50%;
  }

  .el-button {
    margin-right: 10px;
  }
</style>
